<template>
  <div class="title3">{{ interfaceNum }}</div>
  <Card title="采集器状态" v-bind="$attrs">
    


    <template v-for="item in countList" :key="item">
      <CardGrid class="!md:w-1/3 !w-full grid">
        <span class="flex">
          <span class="text-lg title2">{{ item.name }}数量：{{ item.num }}</span>
        </span>
        <div class="flex justify-between text-secondary">
          <span class=" color-#666">{{ item.status }}</span>
        </div>
        <div class=" mt-1 h-10 text-secondary">
          <p>今日：{{ item.todayDataNum }}</p>
           <p>历史：{{ item.historyDataNum }}</p>
        </div>
        
      </CardGrid>
    </template>
  </Card>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Card } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { groupItems } from './data';
  import { reactive, ref } from 'vue';
  import { defHttp } from '/@/utils/http/axios';

  export default defineComponent({
    components: { Card, CardGrid: Card.Grid, Icon },
    setup() {

      const countList = ref([]);
      const interfaceNum =ref('');
      /**
       * 重新加载数据
       */
      function getData() {
        defHttp.get({ url: '/xichang/tongji/countList' }, { isTransformResponse: false }).then((res) => {
          if (res.success) {
            countList.value = res.result;
            
          } 
        });;

       
      }

      /**
       * 重新加载数据
       */
      function getInterface() {

        defHttp.get({ url: '/xichang/tongji/countInterface' }, { isTransformResponse: false }).then((res) => {
          if (res.success) {
            interfaceNum.value = "对外发布接口数量："+res.result;
            
          } 
        });;

       
      }


      getData();
      getInterface();
      return { countList,interfaceNum };
    },
  });
</script>
<style lang="less" scoped>
.title2{
  text-align: left;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 5px;
}
.grid{
  :deep(&.ant-card-grid){
    // padding: 6px 12px !important;
  }
  p{
    margin-bottom: 0;
  }
}
.title3{
  height: 50px;
    line-height: 50px;
    background: #fff;
    padding-left: 23px;
    font-size: 16px;
    color: #333;
    font-weight: 800;
}
</style>
